{% extends "blog/base.html" %}

{% block css %}
    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css">
{% endblock %}

{% block js %}
    <script src="/static/js/swiper-bundle.min.js"></script>
{% endblock %}

{% block content %}
    <section class="mysection">
        {# 轮播图设置 #}
        <div class="swiper-container">
            <ul class="slides swiper-wrapper">
                {% for carousels in carousel_list %}
                    <li class="swiper-slide">
                        <a href="{{ carousels.link }}" title="{{ carousels.img_link_title }}">
                            <img src="{{ MEDIA_URL }}{{ carousels.carousel }}"
                                 alt="{{ carousels.img_alt }}" style="width:100%;height:100%;"/>
                        </a>
                        {# 图片左下角文字 #}
                        <span class="silde-title" style="color:#777">{{ carousels.carousel_title }}</span>
                    </li>
                {% endfor %}
            </ul>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
            <script type="text/javascript">
                $(function () {
                    // 轮播图
                    new Swiper('.swiper-container', {
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        pagination: {
                            el: '.swiper-pagination',
                        },
                        centeredSlides: true,
                        autoplay: true, //自动播放时间
                        autoHeight: true //自动高度
                    });
                });
            </script>
        </div>

        <div class="arclist">
            <h4 class="index-title homeh4">
                <a href=""><i class="el el-idea"></i>最新文章<small>News</small></a>
            </h4>
            {% include "blog/component/blog_list.html" with blogs=blog_list id="New" %}
        </div>

        <div class="arclist">
            <h4 class="index-title homeh4">
                <a href=""><i class="el el-fire"></i>热门文章<small>Hot</small></a>
            </h4>
            {% include "blog/component/blog_list.html" with blogs=blog_hot id="Hot" %}
        </div>
    </section>
{% endblock %}
